<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <div class="Container100 TexAlCenter">
                                <i class="icon-mountains14 Red Fs130 MarTop20" style="line-height:1 !important;"/>
                            </div>
                            <h1 class="TexAlCenter Fs40 Red">Volt Documentation</h1>
                            <div class="EmptyBox40"/>
                            <p:panel>
                                <div class="Fs20 TexAlCenter Red">Menus</div>
                                <div class="EmptyBox10"/>
                                <p>
                                    Volt provides a multi-level menu positioned at the left side of the screen.
                                    This menu is responsive and adjusts to the screen width automatically.
                                    Menu is actually a PrimeFaces component specifically created for Volt
                                    under <i>http://primefaces.org/volt</i> namespace having <i>menu</i> as the tag name,
                                    usage is same as a regular PrimeFaces component that utilizes p:submenu and p:menuitem
                                    components. This component is placed inside the Volt theme jar so this jar must be in your classpath.
                                    Demo application features an example menu created declaratively however since it is a JSF component,
                                    you can also use PrimeFaces MenuModel API to create the menu dynamically.
                                </p>

                                <p>
                                    Menu is stateful by default, for state saving to work,
                                    explicit ids must be given to each submenu and menuitem.
                                    In case you'd like clean the state,
                                    call <i>Volt.clearMenuState()</i> method with javascript.
                                </p>

                                <p>
                                    In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work.
                                    These files are included automatically whenever there is a PrimeFaces component on the page that depends on them,
                                    however you can easily add them manually if required using h:outputScript component
                                    with name attribute as jquery/jquery.js and primefaces.js under primefaces library.
                                    An example would be
                                    <i>&lt;h:outputScript name="jquery/jquery.js" library="primefaces" /&gt;</i>
                                </p>
                            </p:panel>
                            <div class="EmptyBox60"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>
